Merge agentic-upgrade into main by xcodeassociated · Pull Request #2 · xcodeassociated/react-typescript-vite-template

xcodeassociated · 2026-02-14T19:53:00Z

Merges updates from agentic-upgrade into main.

…plugin

…eScript, Vite, Tailwind v4

…n versions

…ions

….0, add engines field

… restrictions in AGENTS.md

… recommend new branch

…sole logs, adjust MockedProvider import, add table UI component, update imports and documentation

Copilot

Pull request overview

This PR merges the agentic-upgrade branch into main, primarily upgrading the frontend toolchain/dependencies (Vite/React/Tailwind/Vitest) and updating build/CI configuration to match the new stack.

Changes:

Upgrade core dependencies/dev tooling (React, Vite, Tailwind CSS, Vitest, ESLint, Radix UI, etc.) and adjust related configuration.
Migrate Tailwind setup to v4-style configuration (CSS @import/@theme, new Vite + PostCSS plugins) and update many Tailwind utility strings in UI components.
Update CI/Docker workflows and project docs for Node/bun-based workflows.

Reviewed changes

Copilot reviewed 32 out of 35 changed files in this pull request and generated 11 comments.

Show a summary per file

File	Description
vite.config.ts	Adds Tailwind Vite plugin; keeps Vitest config in Vite config.
tsconfig.app.json	Expands include list to add Vitest globals typing.
tailwind.config.js	Removes Tailwind v3 JS config (migration toward Tailwind v4 CSS-first config).
src/pages/users/hooks/useSseUsers.tsx	Adjusts SSE retry option handling.
src/pages/users/hooks/useRolesGraphql.tsx	Reorders effect/helper function (logic remains equivalent).
src/pages/users/hooks/useColumns.tsx	Updates Tailwind classes for focus/outline styling.
src/pages/users/Users.test.tsx	Updates EventSource mocking and Apollo MockedProvider usage; dynamic import of Users.
src/lib/keycloak.ts	Changes Keycloak realm value.
src/components/ui/table.tsx	Updates Tailwind selector syntax for footer row borders.
src/components/ui/sheet.tsx	Updates Tailwind focus outline class.
src/components/ui/select.tsx	Updates Tailwind sizing/outline + Radix variable class syntax.
src/components/ui/navigation-menu.tsx	Updates Tailwind classes (including z-index + variant syntax changes).
src/components/ui/input.tsx	Updates Tailwind focus-visible outline class.
src/components/ui/dropdown-menu.tsx	Updates Tailwind outline + data-* variant syntax.
src/components/ui/dialog.tsx	Updates Tailwind focus outline class.
src/components/ui/command.tsx	Updates Tailwind selector syntax for cmdk sub-elements.
src/components/ui/card.tsx	Updates Tailwind shadow utility.
src/components/ui/button.tsx	Updates Tailwind focus-visible outline class.
src/components/ui/badge.tsx	Updates Tailwind focus outline class.
src/components/custom/multiple-selector.tsx	Updates Tailwind data-* variant syntax and outline classes.
src/components/custom/data-table.tsx	Fixes TanStack types import to come from public API.
src/components/custom/coockie-consent.tsx	Updates z-index Tailwind utility.
src/components/app/nav-item.tsx	Fixes `useLocation` import source to `react-router-dom`.
src/App.css	Migrates Tailwind directives to v4 CSS-first setup and theme tokens.
postcss.config.js	Switches to `@tailwindcss/postcss` plugin config.
package.json	Updates scripts, dependency versions, and adds Node engine requirement.
README.md	Adds Node version setup guidance.
Dockerfile	Updates Bun base image and uses `bun.lockb` in build stage.
AGENTS.md	Updates agent guidance toward bun workflows and adds codegen-first guidance.
.nvmrc	Pins Node version.
.github/workflows/main-branch-docker.yml	Refactors workflow to build/test before Docker publish on main.
.github/workflows/ci.yml	Adds CI workflow for pushes/PRs (install/codegen/test/build).
.eslintrc.cjs	Adjusts lint rules and disables some react-hooks rules.

Comments suppressed due to low confidence (1)

AGENTS.md:52

AGENTS.md says bun run build “Type-checks (tsc -b) then produces production bundle”, but package.json now defines build as vite build only (no tsc). Update this table entry (or reintroduce the typecheck step) so the documented workflow matches the actual scripts.

| Command                    | Description                                                         |
| -------------------------- | ------------------------------------------------------------------- |
| `bun run dev`              | Starts Vite dev server (default port 3000).                         |
| `bun run build`            | Type‑checks (`tsc -b`) then produces production bundle.             |
| `bun run preview`          | Serves the production build locally (`vite preview`).               |
| `bun run prod`             | Serves built assets with `serve -s dist`.                           |

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-15T13:25:17Z

README.md

+You can also use the provided npm script:
+
+```bash
+npm run setup
+```
+
+which will execute the above commands (assuming `nvm` is available in your shell).
+


This README instructs running npm run setup, but package.json doesn’t define a setup script (and the repo docs elsewhere indicate bun is the package manager). Either add the script or update the README to the correct command(s) (e.g., nvm install/use steps only, or a bun run setup script).

Suggested change

You can also use the provided npm script:

```bash

npm run setup

```

which will execute the above commands (assuming `nvm` is available in your shell).

Copilot · 2026-02-15T13:25:17Z

package.json

    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "build": "vite build",
+    "lint": "eslint -c .eslintrc.cjs . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",


The build script no longer runs tsc (type-check), so CI will no longer fail on TypeScript type errors that Vite’s build may not catch. Consider adding a separate typecheck script (e.g., tsc -b or tsc --noEmit) and running it in CI to keep type safety guarantees.

Copilot · 2026-02-15T13:25:17Z

src/pages/users/hooks/useSseUsers.tsx

  const optionsRef = useRef(options)
  const retryCountRef = useRef(0)
-  const maxAttempts = optionsRef.current.maxRetries || 5
+  const maxAttempts = options.maxRetries ?? 5



Switching from optionsRef.current.maxRetries || 5 to options.maxRetries ?? 5 changes behavior when maxRetries is 0: maxAttempts becomes 0, and the hook will never connect because retryCountRef.current < maxAttempts will be false on the first attempt. If 0 is meant to mean “no retries” (but still allow the initial connection), adjust the logic (e.g., treat 0 as 1 attempt, or separate initial attempt vs retries).

Copilot · 2026-02-15T13:25:17Z

src/components/ui/command.tsx

      <DialogContent className="overflow-hidden p-0 shadow-lg">
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+        <Command className="**:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 **:[[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 **:[[cmdk-input]]:h-12 **:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
          {children}


The className string contains **:[[cmdk-…]]: sequences, which don’t match the Tailwind arbitrary selector/variant syntax used elsewhere in this codebase (and look like accidental Markdown). This will likely cause these styles to never apply. Replace these with valid Tailwind selectors (e.g., the previous [&_[cmdk-group-heading]]: pattern) so CommandDialog renders correctly.

Copilot · 2026-02-15T13:25:17Z

src/components/ui/command.tsx

    className={cn(
-      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      "overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground",
      className
    )}


Same issue here: **:[[cmdk-group-heading]]: is not a valid Tailwind selector/variant and will be ignored, so group heading spacing/typography won’t be applied. Use valid Tailwind arbitrary selector syntax for cmdk group headings.

Copilot · 2026-02-15T13:25:18Z

.eslintrc.cjs

+    'react-hooks/set-state-in-effect': 'off',
+    'react-hooks/incompatible-library': 'off',
+    'react-hooks/exhaustive-deps': 'off',
+    'no-unused-disable': 'off',


no-unused-disable is not a core ESLint rule, and there’s no plugin configured that provides it. ESLint will typically error on unknown rule names, which would break bun run lint/CI. Remove this rule entry or replace it with the correct rule from an installed plugin (or rely on --report-unused-disable-directives which is already passed on the CLI).

Suggested change

'no-unused-disable': 'off',

Copilot · 2026-02-15T13:25:18Z

src/components/ui/navigation-menu.tsx

    className={cn(
-      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+      "top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
      className


z-1 is not part of Tailwind’s default z-index scale (and will be ignored unless you’ve explicitly added it). Previously this used an arbitrary value (z-[1]). Consider reverting to z-[1] or switching to a standard z-index utility (e.g., z-10) to preserve the intended stacking behavior.

src/components/ui/table.tsx

Copilot · 2026-02-15T13:25:18Z

vite.config.ts

 /// <reference types="vitest" />
 /// <reference types="vitest" />
 import { defineConfig } from 'vite'


There are two identical /// <reference types="vitest" /> lines at the top of this file. Remove the duplicate to avoid confusion and keep the config clean.

vite.config.ts

xcodeassociated added 19 commits February 4, 2026 15:12

Upgrade Tailwind CSS to v4 and migrate config, add @tailwindcss/vite …

206e03a

…plugin

Upgrade dependencies: Radix UI, testing libs, GraphQL, utilities, Typ…

2b9a4c6

…eScript, Vite, Tailwind v4

Downgrade Vite and TypeScript for Node 21 compatibility; revert plugi…

70113d5

…n versions

Upgrade to Vite 7 and Node 22 compatibility; restore Vite plugin vers…

21b8f3d

…ions

Add .nvmrc for Node 22.12.0

23a62fc

Add node version check script, update scripts to enforce Node >=22.12…

7c67709

….0, add engines field

Remove node version check script and restore original scripts

5f72f27

Add setup instructions to README, add setup script, and enforce agent…

86ea7d5

… restrictions in AGENTS.md

Add zsh usage and nvm check instructions to AGENTS.md

6c75c5c

Emphasize critical rule: must ask for permission before any commit

5c8502e

Add branch management rule: avoid changes on main without permission,…

23759ee

… recommend new branch

Fix Users test: restore vi.mock for useRolesGraphql, remove noisy con…

40e1093

…sole logs, adjust MockedProvider import, add table UI component, update imports and documentation

fix linter errors

524a925

fix tests after upgrade

9805499

fix build

66479c4

update agent instructions

d89bf38

try fix docker ci

f5fc589

update github CI actions

3493b88

fix agentic issues and apollo client

9268b9f

Copilot AI review requested due to automatic review settings February 15, 2026 13:19

Copilot started reviewing on behalf of xcodeassociated February 15, 2026 13:19 View session

Copilot AI reviewed Feb 15, 2026

View reviewed changes

xcodeassociated added 5 commits February 15, 2026 14:32

use fix eslint for current config

5539211

fix ai style hallucinations

ed319b3

tailwind migrate 3 to 4

1d6d095

use tailwind v4 vite plugin

6e0237c

manual tailwind styles migration to v4

c5c2741

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Merge agentic-upgrade into main#2

Merge agentic-upgrade into main#2
xcodeassociated wants to merge 24 commits intomainfrom
agentic-upgrade

xcodeassociated commented Feb 14, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 15, 2026

Uh oh!

Copilot AI Feb 15, 2026

Uh oh!

Copilot AI Feb 15, 2026

Uh oh!

Copilot AI Feb 15, 2026

Uh oh!

Copilot AI Feb 15, 2026

Uh oh!

Copilot AI Feb 15, 2026

Uh oh!

Copilot AI Feb 15, 2026

Uh oh!

Uh oh!

Copilot AI Feb 15, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

xcodeassociated commented Feb 14, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 15, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Feb 15, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant